<script lang="ts" setup>
import dayjs from 'dayjs'
import { computed } from 'vue'
import { AccountType, CustomerRefundType } from '@/types/enum'
import { queryCmRefundApplyTableCol } from '@/api/expense/types/expense'

const props = defineProps<{
  data: queryCmRefundApplyTableCol[]
  loading: boolean
  activeName: CustomerRefundType
}>()
const changeAccountType = computed(() => {
  return (accountType: AccountType) => {
    switch (accountType) {
      case 'Origin':
        return '原路退回'
      case 'Alipay':
        return '支付宝'
      case 'BankCard':
        return '银行卡'
      default:
        return ''
    }
  }
})
const refundstate = computed(() => {
  return (state: CustomerRefundType) => {
    if (state == 'underreview') {
      return '审核中'
    } else if (state == 'refund') {
      return '退款中'
    } else if (state == 'refunded') {
      return '已退款'
    } else if (state == 'overrule') {
      return '被驳回'
    } else if (state == 'withdraw') {
      return '已撤回'
    } else {
      return '其他'
    }
  }
})
const operatorLabel = computed(() => {
  switch (props.activeName) {
    case 'refund':
      return '审核人'
    case 'refunded':
      return '退款人'

    case 'overrule':
      return '驳回人'

    case 'withdraw':
      return '撤回人'

    default:
      return ''
  }
})
const changeStateColor = (state: CustomerRefundType) => {
  switch (state) {
    case 'refunded':
      return 'var(--xy-success-color)'
    case 'underreview':
      return 'var(--xy-warning-color)'
    case 'refund':
      return 'var(--xy-warning-color)'
    default:
      return 'var(--xy-primary-color)'
  }
}
// const emits = defineEmits(['resubmit'])
/** 重新提交 */
// const resubmit = (phone: string, orderId: string, orderType: string, userId: number) => {
//   emits('resubmit', phone, orderId, orderType, userId)
// }
</script>

<template>
  <el-table :data="data" v-loading="loading" class="no-border">
    <el-table-column type="expand">
      <template #default="props">
        <div>
          <div mb-10 mt-12 class="text-[16px] text-[#000000]">退款驳回记录</div>
          <el-table :data="props.row.refusedList" empty-text="暂无退款驳回数据" class="no-border">
            <el-table-column prop="createdTime" label="申请时间" min-width="200" sortable />
            <el-table-column prop="applyAmount" label="退款金额" />
            <el-table-column prop="accountType" label="退款渠道">
              <template #default="scope">
                <span>{{ changeAccountType(scope.row.accountType) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="accountData" label="账户信息">
              <template #default="scope">
                <span v-if="scope.row.accountType === 'Alipay'"
                  >{{ JSON.parse(scope.row.accountData).aliName
                  }}{{ JSON.parse(scope.row.accountData).aliAccount }}</span
                >
                <span v-else-if="scope.row.accountType === 'BankCard'"
                  >{{ JSON.parse(scope.row.accountData).bankName
                  }}{{ JSON.parse(scope.row.accountData).bankBranchName
                  }}{{ JSON.parse(scope.row.accountData).username
                  }}{{ JSON.parse(scope.row.accountData).card }}</span
                >
                <span v-else>-</span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="状态">
              <template #default="scope">
                <span class="text-[#FF0000]"> {{ refundstate(scope.row.state) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="approvalResult" label="驳回原因" />
            <el-table-column prop="approvalTime" label="驳回时间" />
            <el-table-column prop="submitter" label="退款提交人" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="mobilePhone" label="用户手机号" min-width="150" align="center" />
    <el-table-column prop="orderId" label="订单号" min-width="200" align="center" />
    <el-table-column prop="orderType" label="退款类型" min-width="120" align="center" />
    <el-table-column
      prop="remainDuration"
      label="退前剩余时长/次数"
      min-width="150"
      align="center"
    />
    <el-table-column prop="refundAmount" label="可退金额" min-width="120" align="center" />
    <el-table-column prop="applyAmount" label="退款金额" min-width="120" align="center" />
    <el-table-column prop="createdTime" label="申请时间" sortable min-width="200" align="center">
      <template #default="scope">
        <span>{{ dayjs(scope.row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="accountData"
      label="账户信息"
      min-width="150"
      show-overflow-tooltip
      align="center"
    >
      <template #default="scope">
        <span v-if="scope.row.accountType === 'Alipay'"
          >{{ JSON.parse(scope.row.accountData).aliName
          }}{{ JSON.parse(scope.row.accountData).aliAccount }}</span
        >
        <span v-else-if="scope.row.accountType === 'BankCard'"
          >{{ JSON.parse(scope.row.accountData).bankName
          }}{{ JSON.parse(scope.row.accountData).bankBranchName
          }}{{ JSON.parse(scope.row.accountData).username
          }}{{ JSON.parse(scope.row.accountData).card }}</span
        >
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="applyReason"
      label="退款原因"
      min-width="150"
      show-overflow-tooltip
      align="center"
    />
    <el-table-column prop="accountType" label="退款渠道" min-width="120" align="center">
      <template #default="scope">
        <span>{{ changeAccountType(scope.row.accountType) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updatedTime" label="退款时间" sortable min-width="200" align="center">
      <template #default="scope">
        <span v-if="scope.row.state == 'refunded'">
          <span>{{ dayjs(scope.row.updatedTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
        </span>
        <span v-else>-</span>
      </template>
    </el-table-column>
    <el-table-column prop="depositOrderId" label="退款订单号" min-width="200" align="center" />
    <el-table-column prop="state" label="状态" fixed="right" min-width="120" align="center">
      <template #default="scope">
        <span
          :style="{
            color: changeStateColor(scope.row.state)
          }"
        >
          {{ refundstate(scope.row.state) }}</span
        >
      </template>
    </el-table-column>
    <el-table-column prop="approvalResult" label="驳回原因" min-width="120" align="center" />
    <el-table-column
      prop="submitter"
      label="退款提交人"
      min-width="200"
      align="center"
      v-if="activeName == 'all' || activeName == 'underreview'"
    >
      <template #default="scope">
        <span v-if="scope.row.submitter == '用户'">{{ scope.row.submitter }}</span>
        <span v-else-if="scope.row.submitter !== null && scope.row.submitter !== ''"
          >客服&nbsp;&nbsp;({{ scope.row.submitter }})</span
        >
        <span v-else>{{ scope.row.submitter }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="approver" :label="operatorLabel" min-width="120" v-else align="center" />
    <!-- <el-table-column label="操作" fixed="right" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          v-if="scope.row.state === 'overrule'"
          @click="
            resubmit(
              scope.row.mobilePhone,
              scope.row.orderId,
              scope.row.orderType,
              scope.row.userId
            )
          "
          >重新提交</el-button
        >
        <span v-else>-</span>
      </template>
    </el-table-column> -->
  </el-table>
</template>

<style scoped></style>
